<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body{
      background-color: #fbfbfb;
    }
    .top01 {
      width: 100%;
      height: 100px;
      background-color: rgb(0, 140, 255);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    h1 {
      font-size: 30px;
      color: #fefefe;
    }

    .top02 {
      position: absolute;
      top: 250px;
      left: 400px;
    }

    .top2_2 {
      width: 400px;
      height: 300px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
      top: 60px;
      left: 600px;
    }

    .img {
      position: relative;
      top: 5px;
      left: 60px;
      width: 40px;
      height: 40px;
      background-image: url(assets/img/img01.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    h2{
      width: 100px;
      position: relative;
      top: -30px;
      left: 120px;
      color: #c1c1c1;
    }
    .img01{
      background-color: #c1c1c1;
      position: relative;
      top: -20px;
      /* left: 60px; */
      width: 400px;
      height: 1.5px;
    }
    .img02{
      background-color: #c1c1c1;
      position: relative;
      top: 60px;
      /* left: 60px; */
      width: 400px;
      height: 1.5px;
    }

    /* h5 {
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    } */

    .top2_2_1 {
      width: 165px;
      position: relative;
      top: 0px;
      left: 120px;
    }

    .top2_2_2 {
      width: 165px;
      position: relative;
      top: 20px;
      left: 120px;
    }

    .top2_2_3 {
      width: 165px;
      position: relative;
      top: 40px;
      left: 120px;
    }
    input{
      text-align: center;
    }


    .add1 , 
    .add2{
      height: 30px;
    width: 80px;
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(74, 197, 246));
    border-radius: 5px;
    text-align: center;}
    .add1{
      position: relative;
      top: -15px;
      /* left: 860px; */
    }
    
    .add2{
      position: relative;
      top: 20px;
      left: 860px;
    }
    
    
    
    
    

    a {
      text-decoration: none;
      color: #000;
    }
    .top2_3{
      width: 300px;
      position: relative;
      top: 70px;
      left: 80px;
    }


    tr td {
      font-size: 30px;
      color: #3d3e46;
      letter-spacing: 10px;
    }

    .top03 {
      position: relative;
      top: 200px;
      width: 100%;
      height: 50px;
      background-color: #0005a4;
    }
  </style>
</head>

<body>
  <div class="top01">
    <h1>添加课程</h1>
  </div>

  <div class="top02">

    <table>
      <tr>

        <td>欢迎进入</td>

      </tr>
      <tr>
        <td>添加页面</td>

      </tr>

    </table>
  </div>
  </div>
  <form action="addbookcontrol.jsp" method="post">
  <div class="top2_2">
    <div class="img"></div><h2>A d d</h2><div class="img01"></div>
    <div class="top2_2_4"></div>
    <div class="top2_2_1">
      <h5>课号：</h5>
      <input type="text" name="lesson_hao" placeholder="请输入课号" />

    </div>
    <div class="top2_2_2">
      <h5>课程名称：</h5>
      <input type="text" name="lesson_name" placeholder="请输入课程名称" />

    </div>
    <div class="top2_2_3">
      <h5>教师名称：</h5>
      <input type="text" name="teacher_hao" placeholder="请输教师名称" />

    </div>
    <div class="img02"></div>

    <div class="top2_3">

      <table>
      <tr>
          <td  aling="center" colspan="2">
          <input class="add1" type="submit" value="添加">
          </td>
      </tr>
      </table>
  
    </div>
  </div>
  </form>
           <form action="booklist.jsp" method="post">
	          <td  aling="center" colspan="2">
	          <input class="add2" type="submit" value="关闭">
	          </td>
          </form>
  </div>

  <div class="top03">

  </div>

</body>

</html>